<template>
	<!-- 提现记录 -->
	<div class="rec-main">
		<ul v-if="listArr.length">
			<li class="flex" v-for="(list, index) in listArr" :key="index">
				<p>
					<em :class="list.status === '0' ? 'clo-0' : list.status === '1' ? 'clo-1' : 'clo-2'">
						提现状态：{{ list.status === '0' ? '成功' : list.status === '1' ? '审核中' : '失败' }}
					</em>
					<span>{{ list.createTime }}</span>
				</p>
				<b :class="list.status === '0' ? 'clo-0' : list.status === '2' ? 'clo-2' : ''">{{ viewValue(list.amount) }}</b>
			</li>
		</ul>
		<div class="rec-none" v-else><img src="../../../assets/images/icon_none.png" /></div>
	</div>
</template>

<script>
import { withdrawApplyRecord } from '@/api/';
export default {
	data() {
		return {
			listArr: []
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		viewValue(t){
			if(!t) return '-'
			return `${t}.00`
		},
		getData() {
			this.$toast.loading({
				message: '获取数据中...',
				forbidClick: true,
				duration: 0,
				loadingType: 'spinner'
			});
			this.listArr = [];
			withdrawApplyRecord({})
				.then(res => {
					if (res.code === 200 && res.rows.length) {
						this.listArr = res.rows;
					}
					this.$toast.clear();
				})
				.catch(msg => {
					this.$toast.clear()
				});
		}
	}
};
</script>

<style lang="less" scoped>
.rec-main {
	.flex {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.rec-none {
		text-align: center;
		padding-top: 55%;
		> img {
			width: 70%;
		}
		> p {
			color: #999;
		}
	}
	> ul {
		padding: 0 3%;
		position: relative;
		li {
			padding: 3.6% 4%;
			border-bottom: 2px solid #f0f0f0;
			position: relative;
			> p {
				width: 70%;
				> em {
					display: block;
					font-weight: 500;
					font-size: 27px;
					margin-bottom: 10px;
					&.clo-0 {
						color: #4dc86f;
					}
					&.clo-1 {
						color: #fe8626;
					}
					&.clo-2 {
						color: #ff0000;
					}
				}
				> span {
					color: #888;
					font-size: 24px;
				}
			}
			> b {
				position: absolute;
				right: 3%;
				top: 50%;
				height: 40px;
				line-height: 40px;
				display: inline-block;
				text-align: right;
				margin-top: -20px;
				font-weight: 600;
				font-size: 40px;
				&.clo-0 {
					color: #4dc86f;
				}
				&.clo-2 {
					color: #ff0000;
				}
			}
		}
	}
}
</style>
